<template>
  <div class="tw-main tw-school-jxbox">
    <div class="screen">
      <ul class="teach-message-title">
        <li v-for="(item,index) in hero" v-bind:key="item.id" :class="{'teach-message-active':index===titleNumFlag}" @click="ChageitleNumFlag(index,item.labelName,item.name)">
          <div class="xlabel">{{item.label}}</div>
          <div class="teach-message-number">{{item.value}}</div>
        </li>
      </ul>
      <el-row class="tw-grid tw-enrollment school-masse-box">
        <el-col :md="24" :lg="24" class="tw-grid__single" >
          <tw-card
          :flexFlag="true"
          :heightCard="'76vh'"
          >
            <div class="right-school-box">
              <h2>{{currentSchoolName?currentSchoolName:'尉氏县'}}</h2>
              <div class="teach-stu-boxMass">
                <div class="stu-box">
                  <div style="display:flex">
                    <div class="stu-img-box teach-stu-img-box">
                      <img src="../../assets/images/学生.png">
                    </div>
                    <div class="stu-sum-box">
                      <p style="height:70px;line-height:80px">学生：<span>{{mmSchoolDite&&mmSchoolDite.xssl?$reformNumber(mmSchoolDite.xssl):0}}人</span></p>
                    </div>
                  </div>
                </div>
                <div class="teach-box">
                  <div style="display:flex">
                    <div class="teach-img-box teach-stu-img-box">
                      <img src="../../assets/images/教师.png">
                    </div>
                    <div class="teach-sum-box">
                      <p style="height:70px;line-height:80px">专任教师：<span>{{mmSchoolDite&&mmSchoolDite.zrjssl?$reformNumber(mmSchoolDite.zrjssl):0}}人</span></p>
                    </div>
                  </div>
                </div>
              </div>
                <ul class="teach-mess-bigBox">
                  <li class="teach-mess-listBox">
                    <div class="img-box">
                      <img src="../../assets/images/2.5d-总用地面积.png" alt="">
                    </div>
                    <div class="mess-listBox">
                      <p>总用地面积</p>
                      <p>{{mmSchoolDite&&mmSchoolDite.zdmj?$reformNumber(Math.round((mmSchoolDite.zdmj/666.67)*100)/100):0}}亩</p>
                      <p class="font-color">生均: {{(mmSchoolDite&&mmSchoolDite.zdmj&&mmSchoolDite.xssl)?Math.round((mmSchoolDite&&mmSchoolDite.zdmj/mmSchoolDite.xssl) * 100) / 100:0}}平方米</p>
                    </div>
                  </li>
                  <li class="teach-mess-listBox">
                    <div class="img-box">
                      <img src="../../assets/images/2.5d-教学面积.png" alt="">
                    </div>
                    <div class="mess-listBox">
                      <p>教学及辅助用房面积</p>
                      <p>{{(mmSchoolDite&&mmSchoolDite.sjjfzyfmj&&mmSchoolDite.type==='1')?$reformNumber(Math.round((mmSchoolDite.sjjfzyfmj/10000)*100)/100):(mmSchoolDite&&mmSchoolDite.sjjfzyfmj&&mmSchoolDite.type==='2')?$reformNumber(mmSchoolDite.sjjfzyfmj):0}}{{mmSchoolDite&&mmSchoolDite.type==='1'?'万平方米':'平方米'}}</p>
                      <p class="font-color">生均: {{(mmSchoolDite&&mmSchoolDite.sjjfzyfmj&&mmSchoolDite.xssl)?Math.round((mmSchoolDite.sjjfzyfmj/mmSchoolDite.xssl) * 100) / 100:0}}平方米</p>
                    </div>
                  </li>
                  <li class="teach-mess-listBox">
                    <div class="img-box">
                      <img src="../../assets/images/2.5d-体育运动馆.png" alt="">
                    </div>
                    <div class="mess-listBox">

                      <p>体育运动场馆面积</p>
                      <p>{{(mmSchoolDite&&mmSchoolDite.tyydcgmj&&mmSchoolDite.type==='1')?$reformNumber(Math.round((mmSchoolDite.tyydcgmj/10000)*100)/100):(mmSchoolDite&&mmSchoolDite.tyydcgmj&&mmSchoolDite.type==='2')?$reformNumber(mmSchoolDite.tyydcgmj):0}}{{mmSchoolDite&&mmSchoolDite.type==='1'?'万平方米':'平方米'}}</p>
                      <p class="font-color">生均: {{(mmSchoolDite&&mmSchoolDite.tyydcgmj&&mmSchoolDite.xssl)?Math.round((mmSchoolDite.tyydcgmj/mmSchoolDite.xssl) * 100) / 100:0}}平方米</p>
                    </div>
                  </li>

                  <li class="teach-mess-listBox">
                    <div class="img-box">
                      <img src="../../assets/images/2.5d绿化用地面积.png" alt="">
                    </div>
                    <div class="mess-listBox">
                      <p>绿化用地面积</p>
                      <p>{{(mmSchoolDite&&mmSchoolDite.lhydmj&&mmSchoolDite.type==='1')?$reformNumber(Math.round((mmSchoolDite.lhydmj/10000)*100)/100):(mmSchoolDite&&mmSchoolDite.lhydmj&&mmSchoolDite.type==='2')?$reformNumber(mmSchoolDite.lhydmj):0}}{{mmSchoolDite&&mmSchoolDite.type==='1'?'万平方米':'平方米'}}</p>
                      <p class="font-color">生均: {{(mmSchoolDite&&mmSchoolDite.lhydmj&&mmSchoolDite.xssl)?Math.round((mmSchoolDite.lhydmj/mmSchoolDite.xssl) * 100) / 100:0}}平方米</p>
                    </div>
                  </li>
                  <li class="teach-mess-listBox">
                    <div class="img-box">
                      <img src="../../assets/images/2.5d-班级数量.png" alt="">
                    </div>
                    <div class="mess-listBox">
                      <p>班级数量</p>
                      <p>{{mmSchoolDite&&mmSchoolDite.bjsl?$reformNumber(mmSchoolDite.bjsl):0}}个</p>
                      <!-- <p class="font-color">生均: {{mmSchoolDite.wldmtjssl?Math.round((mmSchoolDite.wldmtjssl/mmSchoolDite.xssl) * 100) / 100 :0}}间</p> -->
                    </div>
                  </li>
                  <li class="teach-mess-listBox">
                    <div class="img-box">
                      <img src="../../assets/images/2.5d-网络多媒体.png" alt="">
                    </div>
                    <div class="mess-listBox">
                      <p>网络多媒体教室数量</p>
                      <p>{{mmSchoolDite&&mmSchoolDite.wldmtjssl?$reformNumber(mmSchoolDite.wldmtjssl):0}}间</p>
                      <!-- <p class="font-color">生均: {{mmSchoolDite.wldmtjssl?Math.round((mmSchoolDite.wldmtjssl/mmSchoolDite.xssl) * 100) / 100 :0}}间</p> -->
                    </div>
                  </li>
                  <li class="teach-mess-listBox">
                    <div class="img-box">
                      <img src="../../assets/images/2.5d-教学仪器.png" alt="">
                    </div>
                    <div class="mess-listBox">
                      <p>教学仪器设备值</p>
                      <p>{{mmSchoolDite&&mmSchoolDite.jxyqsbz?$reformNumber(mmSchoolDite.jxyqsbz):0}}万元</p>
                      <!-- <p class="font-color">生均: {{mmSchoolDite.jxyqsbz?Math.round((mmSchoolDite.jxyqsbz/mmSchoolDite.xssl) * 100) / 100 :0}}万元</p> -->
                    </div>
                  </li>
                  <li class="teach-mess-listBox">
                    <div class="img-box">
                      <img src="../../assets/images/2.5d-计算机数量.png" alt="">
                    </div>
                    <div class="mess-listBox">
                      <p>计算机数量</p>
                      <p>{{mmSchoolDite&&mmSchoolDite.jsjsl?$reformNumber(mmSchoolDite.jsjsl):0}}台</p>
                      <!-- <p class="font-color">生均: {{mmSchoolDite.jsjsl?Math.round((mmSchoolDite.jsjsl/mmSchoolDite.xssl) * 100) / 100:0}}台</p> -->
                    </div>
                  </li>
                  <li class="teach-mess-listBox">
                    <div class="img-box">
                      <img src="../../assets/images/2.5d-图书数量.png" alt="">
                    </div>
                    <div class="mess-listBox">
                      <p>图书数量</p>
                      <p>{{mmSchoolDite&&mmSchoolDite.tssl?$reformNumber(mmSchoolDite.tssl):0}}册</p>
                      <!-- <p class="font-color">生均: {{mmSchoolDite.tssl?Math.round((mmSchoolDite.tssl/mmSchoolDite.xssl)*100)/100:0}}册</p> -->
                    </div>
                  </li>
                </ul>
            </div>
            <div class="tw-box">
              <tw-map  :isShowFlag="true" @mapschool="mapschool" ref="twMapRef" :styleMpId="'09136c32832883d96b4d0fc54e599d37'" mapInitLeft="95.04vh" :mapHeight="'74vh'"  :mapWidth="'78.43vh'"></tw-map>
            </div>
          </tw-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script scoped>
import TwCard from '@/components/TwCard.vue'
import TwChart from '@/components/TwChart.vue'
// import TwMap from '@/components/TwMap.vue'
import TwMap from '@/components/tw-map/TwMap.vue'
// import TwEcharts from '@/components/TwEcharts.vue'
export default{
  components: {
    TwCard,
    TwChart,
    TwMap
  },
  created () {
    this.resizeChart()
  },
  props: [],
  data () {
    return {
      tjnf:'2019',
      curLable: '',
      curParams: '全部教育',
      hero: [],
      titleNumFlag: 0, // 头部初始化默认数据
      currentSchoolName: '',
      mmSchoolDite: {},
      // 地图模拟数据
      mmmData: [],
      additionalOptions: {
        echarts_businessData: {},
        echarts_dataChangeMonitoring: {}
      },
      line: {
        chartOption: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            show: false,
            top: '0%',
            textStyle: {
              fontSize: 16
            }
          },
          grid: {
            top: '5%',
            left: '3%',
            right: '8%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'value',
              splitLine: {
                show: false
              },
              axisLabel: {
                fontSize: 16,
                color: '#fff'
              },
              splitNumber: 3
            }
          ],
          yAxis: [
            {
              type: 'category',
              axisLabel: {
                interval: 0,
                fontSize: 16
              },
              splitLine: {
                show: false
              },
              data: []
            }
          ],
          series: []
        },
        chartDataMaps: [],
        dataset: []
      }
    }
  },
  mounted () {
    // this.schoolTypeSumInit()
    this.mapschool('','全部教育')
  },
  methods: {
    // getNewSchool (params) {
    //   console.log(this.curLable)
    //   this.mapSchool(params, this.curLable)
    // },

    /**
     * 切换头部样式
    */
    ChageitleNumFlag (index, lable,name) {

      this.titleNumFlag = index
      this.curLable = lable
      // this.$refs.twMapRef.getMapNewData(lable)
      this.$refs.twMapRef.getSchoolDW(name)
      this.mapschool('', lable)
      this.curParams=lable
    },

    // 接收点击地图学校的参数
    mapschool (params = '', queryData) {
      let quary = { 'conditions': [], 'fields': [] }
      let timeSectionValue = []
        timeSectionValue = [{ 'fieldName': 'jyjd', 'fieldValues': [queryData?queryData:this.curParams], 'operator': 'IN', 'prepender': 'AND' },{ 'fieldName': 'tjnf', 'fieldValues': [this.tjnf], 'operator': 'IN', 'prepender': 'AND' }]
      if(params&&params.value[0].jgid){
        timeSectionValue = [{ 'fieldName': 'tjnf', 'fieldValues': [this.tjnf], 'operator': 'IN', 'prepender': 'AND' },{ 'fieldName': 'jgid', 'fieldValues': [params.value[0].jgid], 'operator': 'IN', 'prepender': 'AND' }]
      }
      quary.conditions = timeSectionValue
      this.currentSchoolName = params ? params.value[0].name: ''
      this.$axios.post(`/tw-cloud-datatheme-server/themedata/app_xxxx_xxzbxx`, quary).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200'&&pageInfo.list.length>0) {
          this.mmSchoolDite = pageInfo.list[0]
        }else {
          this.mmSchoolDite = {}
        }
      })
    },

    // 学校类型数量统计
    schoolTypeSumInit () {
      this.$axios.get(`/tw-cloud-datatheme-server/themedata/app_xxxx_xxlxsltj?tjnf=2019`).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          let schoolList = []
          let xMaxList = []
          let xAxis = this.line.chartOption.xAxis
          let toolTipS = this.line.chartOption.tooltip
          let schoolDataMaps = [{
            dataKey: 'value',
            name: '教育阶段机构'
          }]
          pageInfo.list.forEach(item => {
            schoolList.unshift({
              name: item.jyjd === '其中：调整后中等职业学校' ? '中等职业学校' : item.jyjd,
              value: item.xxsl
            })
            xMaxList.push(item.xxsl)
          })
          xMaxList = xMaxList.sort((a, b) => { return a - b }) // 数组排序取出最大值
          xAxis[0].max = xMaxList[xMaxList.length - 1] + 10
          toolTipS.formatter = (params) => {
            let res = ''
            res += params[0].marker + params[0].name + ': ' + params[0].value + '所'
            return res
          }
          let colors = ['#40bfff', '#91dcf2', '#fb6c84', '#ffb686', '#a694ff', '#7e73ff', '#4c6aff', '#11c9aa', '#8le6b3', '#ffe666', '#00e2fe', '#1890ff', '#a694ff', '#7e73ff', '#4c6aff']
          this.line.dataset = schoolList
          this.line.chartDataMaps = schoolDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'bar',
              colors: colors,
              label: {
                normal: {
                  position: 'right',
                  show: true
                }
              },
              itemStyle: {
                barBorderRadius: [0, 5, 5, 0]
              },
              emphasis: {
                itemStyle: {
                  color: colors[index]
                }
              },
              barMaxWidth: 22
            }
          })
        }
      })
    },

    // 学校数量初始化
    resizeChart () {
      let vm=this
      let quary = { 'conditions': [], 'fields': [] }
      let timeSectionValue = [{ 'fieldName': 'tjnf', 'fieldValues': [2019], 'operator': 'IN', 'prepender': 'AND' }]
      quary.conditions = timeSectionValue
      this.$axios.post('/tw-cloud-datatheme-server/themedata/app_sy_qyxxsltj',quary).then(res => {
        let {serverResult, pageInfo} = res.data
        if (serverResult.resultCode === '200') {
          let teachList = [{
            id: 1,
            label: '全部教育阶段',
            value: 0,
            labelName: '全部教育',
            name:'全部教育'
          }, {
            id: 2,
            label: '学前教育',
            value: 0,
            labelName: '学前教育',
            name:'幼儿园'
          }, {
            id: 3,
            label: '小学教育',
            value: 0,
            labelName: '小学教育',
            name:'小学'
          }, {
            id: 4,
            label: '初中教育',
            value: 0,
            labelName: '初中教育',
            name:'初中'
          }, {
            id: 5,
            label: '普高教育',
            value: 0,
            labelName: '普高教育',
            name:'高中'
          }]
          pageInfo.list.forEach(el => {
            teachList[0].value+=el.xxsl
            teachList.forEach(item => {
              if (el.jyjb === item.name) {
                item.value = el.xxsl
                // item.label = el.jyjd === '全部教育阶段' ? '全部' : el.jyjd
                // item.labelName = el.jyjd
              }
            })
          })
          this.hero = teachList
        }
      })
      // this.$axios.post('/tw-cloud-datatheme-server/themedata/app_xxxx_xxlxsltj?tjnf=2019').then(res => {
      //   let {serverResult, pageInfo} = res.data
      //   if (serverResult.resultCode === '200') {
      //     let teachList = [{
      //       id: 1,
      //       label: '全部教育阶段',
      //       value: 0,
      //       labelName: '全部教育'
      //     }, {
      //       id: 2,
      //       label: '学前教育',
      //       value: 0,
      //       labelName: '学前教育'
      //     }, {
      //       id: 3,
      //       label: '小学教育',
      //       value: 0,
      //       labelName: '小学教育'
      //     }, {
      //       id: 4,
      //       label: '初中教育',
      //       value: 0,
      //       labelName: '初中教育'
      //     }, {
      //       id: 5,
      //       label: '普高教育',
      //       value: 0,
      //       labelName: '普高教育'
      //     }]
      //     pageInfo.list.forEach(el => {
      //       teachList.forEach(item => {
      //         if (el.jyjd === item.label) {
      //           item.value = el.xxsl
      //           item.label = el.jyjd === '全部教育阶段' ? '全部' : el.jyjd
      //           // item.labelName = el.jyjd
      //         }
      //       })
      //     })
      //     this.hero = teachList
      //   }
      // })
    }
  }
}
</script>

<style lang="scss">
// .tw-grid__right{
//   padding: 0 20px 0 20px;
// }
.right-school-box{
  padding:2.6vh 5.2vh 0 0 ;
  min-width: 690px;
  max-width: 960px;
  height: 850px;
  width: 100%;
  margin-left: 5.1vh;
  margin-right: 5.56vh;

  h2{
    font-size: 2.78vh;
    text-align: center;
    font-weight: 600;
    color: #ffed87;
  }

  .teach-stu-boxMass{
    color: #ffffff;
    display: flex;
    margin-top: 2.22vh;
    width: auto;
    margin: 2.22vh auto;
    .teach-box,.stu-box{
      flex: 1;
      font-size: 2.22vh;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 5.37vh;
      p{
        margin: 0;
        font-size: 2.04vh;
      }
    }
    .teach-stu-img-box{
      padding-top: 0.93vh;
      margin-right: 0.93vh;
    }
  }

  .teach-mess-bigBox::after{
    content: " ";
    display: block;
    clear: both;
  }

  .teach-mess-bigBox{
    min-width: 92.6vh;
    margin-top: 2.78vh;
    .img-box{
      width: 10.56vh;
      min-height: 10.56vh;
      display: flex;
      justify-content: center;
      align-items: center;
      float: left;
      img{
        width: 7.78vh;
        height: 9.26vh;
      }
    }
    .teach-mess-listBox{

    }
    .mess-listBox{
      height: 100%;
      margin-top: 0.93vh;
      font-size: 1.67vh;
      color: #ffffff;
      float: left;
    }
  }

  .teach-mess-listBox{
    min-height: 11.56vh;
    min-width: 25.78vh;
    border-radius: 0.93vh;
    // float: left;
    display: inline-block;
    white-space: nowrap;
    margin-bottom: 3.7vh;
    margin-right: 2.78vh;
    background: linear-gradient(left,#0063ff,rgba(0,31,104,0.3));
  }
  .font-color{
    color: #ffed87;
  }
}
.tw-school-jxbox{
  overflow-x: hidden;
}

// 学段title样式
.teach-message-title{
  margin-bottom: 1.85vh;
  height: auto;
  text-align: center;
  li{
    background-color: rgba(0,93,255,0.31);
    color: #fff;
    font-size: 2.78vh;
    display: inline-block;
    min-width: 16.67vh;
    min-height: 7.41vh;
    line-height: 3.7vh;
    margin-right: 1.85vh;
    .xlabel{
      font-size: 1.85vh;
    }
  }
}
.teach-message-active{
  border: 2px solid #015cff;
  box-shadow: inset 0px 1px 15px 4px #015cff;
}
.teach-message-number{
  color:#06ffff;
  vertical-align: baseline;
  font-family: 'customer';
}


.tw-school-jxbox.tw-main {
  height: 89vh!important;
  .screen {
    height: 89vh;
  }
  .right-school-box {
    padding:2.6vh 5.2vh 0 0 ;
    min-width: 63.89vh;
    max-width: 89vh;
    height: 78.7vh;
    width: 100%;
    margin-left: 5.1vh;
    margin-right: 5.56vh;
  }
}
</style>
